<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('PersonnelDepartmentDelete')" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
        <el-button v-if="roles.includes('PersonnelDepartmentUpdate')" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" v-loading="loading" :model="data" :rules="rules" inline>
        <el-row>
          <el-col :span="4">
            <el-form-item label="编号：" prop="coding">
              <el-input clearable v-model="data.coding" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="名称：" prop="name">
              <el-input clearable v-model="data.name" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="分类：" prop="category">
              <SelfSelect v-model="data.category" :showList="departmentCategory" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态：" prop="status">
              <SelfSelect v-model="data.status" :showList="costStatus" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="上级分类：">
              <SelectS v-model="data.parent_id" action="departmentList" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-bottom">
      <el-tabs>
        <el-tab-pane label="描述">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>创建时间日期</p>
                <el-input clearable v-model="data.create_time" readonly />
              </div>
              <div>
                <p>创建人</p>
                <el-input clearable v-model="data.create_admin" readonly />
              </div>
              <div v-if="data.update_time">
                <p>最近更新</p>
                <el-input clearable v-model="data.update_time" readonly />
                <p>更新者</p>
                <el-input clearable v-model="data.update_admin" readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="department" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/personnel/department'
import SelfSelect from '@/components/select-o'
import SelectS from '@/components/select-search'
import TinyMce from '@/components/Tinymce/index'
import { costStatus, departmentCategory } from '@/utils/option'
import Adjunct from '@/components/Upload/adjunct'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update'],
  components: {
    SelfSelect,
    SelectS,
    TinyMce,
    Adjunct
  },
  data() {
    return {
      data: {
        sort: 100,
        status: 1
      },
      editId: null,
      title: '',
      costStatus,
      loading: true,
      departmentCategory,
      rules: {
        coding: { required: true, message: '请输入编号', trigger: 'change' },
        name: { required: true, message: '请输入名称', trigger: 'change' },
        status: { required: true, message: '请输入状态', trigger: 'change' },
        category: { required: true, message: '请选择分类', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '部门管理详情'
      this.editId = edit
      this.info()
    } else {
      this.loading = false
      this.title = '新增部门管理'
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/personnel/department')
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.data.parent_name = res.data.parent ? res.data.parent.name : ''
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/personnel/department')
      } else {
        this.add(API, this.data, this.$refs['form'], '/personnel/department/edit/')
      }
    }
  }
}
</script>


